<template>
  <!-- 进程中详情页 -->
  <div id="StepBar" :class="App.sidebar.opened ? 'open' : 'hide'">
    <div :class="lineDirection"></div>
    <div :class="layoutDirection">
      <div class="default" :class="item.isShow ? 'active' : ''" v-for="item in res.processStatusList" :key="item.id">
        <div class="imgClick" @click="goToPage(item.id)">
          <img src="../../../../public/static/giphy1.gif" alt="" />
        </div>
        <div class="text">{{ item.text }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="StepBar">
import useStore from '@/stores'
const { App, useTable } = useStore()

const { lineDirection = 'shuxian', layoutDirection = 'verticalDirection' } = defineProps<{
  lineDirection?: 'shuxian' | 'hengxian'
  layoutDirection?: 'verticalDirection' | 'horizontal'
  peicang?: 'true' | 'false'
  zhuangxiang?: 'true' | 'false'
  baoguan?: 'true' | 'false'
  qingguan?: 'true' | 'false'
}>()

const res = JSON.parse(sessionStorage.getItem('row') as string)

console.log('🌈成功->信息res', res)

const goToPage = (ids: number) => {
  console.log('🌈成功->goToPage', ids)
  if (res.processStatusList[0].id === ids && res.processStatusList[0].isShow) {
    HandleClick('yixiadan')
  } else if (res.processStatusList[1].id === ids && res.processStatusList[1].isShow) {
    HandleClick('yipeicang')
  } else if (res.processStatusList[2].id === ids && res.processStatusList[2].isShow) {
    HandleClick('yizhuangxiang')
  } else if (res.processStatusList[3].id === ids && res.processStatusList[3].isShow) {
    HandleClick('yibaoguan')
  } else if (res.processStatusList[4].id === ids && res.processStatusList[4].isShow) {
    HandleClick('yiqingguan')
  }
}

const HandleClick = inject<any>('HandleClick')
</script>

<style lang="scss" scoped>
$width_100px: 100px;
$height_60px: 60px;
#StepBar {
  z-index: 9999 !important;
  .imgClick {
    cursor: pointer;
    img {
      width: 75px;
      height: 75px;
    }
  }
  // 打开
  .open {
    width: calc(100% - #{$sideBarWidth});
  }
  // 关闭
  .hide {
    width: calc(100% - 54px);
  }
  // 横向
  .horizontal {
    height: 60px;
    width: 100%;
    display: flex;
    justify-content: space-around;
  }

  // 横线
  .hengxian {
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 3px;
    // background-color: red;
    width: calc(100% - 380px);
    margin-left: 190px;
    margin-top: calc($height_60px / 2);
    transform: translateY(-50%);
    // 自定义虚线
    background-image: linear-gradient(to left, #ccc 0%, #ccc 60%, transparent 0%);
    background-size: 20px 2px;
    background-repeat: x-repeat;
  }
  // 竖线
  .shuxian {
    // 计算宽高
    position: fixed;
    bottom: 0;
    width: 3px;
    height: calc(100% - 350px);
    margin-bottom: 125px;
    margin-left: calc($width_100px / 2);
    transform: translate(-50%);
    // 自定义虚线
    background-image: linear-gradient(to bottom, #ccc 0%, #ccc 60%, transparent 0%);
    background-size: 2px 20px;
    background-repeat: y-repeat;
  }

  // 纵向
  .verticalDirection {
    // 是否固定
    position: fixed;
    bottom: 0;
    width: $width_100px;
    border-right: 1px solid #ebebeb;
    height: calc(100% - $width_100px);
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    /*  & > :first-child {
      height: 50px;
      position: relative;
      // background-color: #fb8b05;
      .line::before {
        z-index: 99;
        content: '';
        top: 100%;
        left: 50%;
        transform: translate(-50%);
        width: 4px;
        height: 130%;
        // 自定义虚线
        background-image: linear-gradient(to bottom, #2f61f9 0%, #2f61f9 60%, transparent 0%);
        background-size: 2px 20px;
        background-repeat: y-repeat;
        position: absolute;
      }
    }
    // 除开首位的其余子结构
    & > :nth-child(n + 2):not(:nth-last-child(-n + 1)) {
      height: 50px;
      position: relative;
      // background-color: #fb8b05;
      .line::before {
        z-index: -1;
        content: '';
        top: -100%;
        left: 50%;
        transform: translate(-50%);
        width: 4px;
        height: 150px;
        position: absolute;
        // 自定义虚线
        background-image: linear-gradient(to bottom, #2f61f9 0%, #2f61f9 60%, transparent 0%);
        background-size: 2px 20px;
        background-repeat: y-repeat;
      }
    }
    & > :last-child {
      height: 50px;
      position: relative;
      // background-color: #fb8b05;
      .line::before {
        z-index: -1;
        content: '';
        top: -100%;
        left: 50%;
        transform: translate(-50%);
        width: 4px;
        height: 100%;
        // 自定义虚线
        background-image: linear-gradient(to bottom, #2f61f9 0%, #2f61f9 60%, transparent 0%);
        background-size: 2px 20px;
        background-repeat: y-repeat;
        position: absolute;
      }
    } */
  }

  .default {
    margin: 0 auto;
    filter: grayscale(100%);

    opacity: 1;
    img {
      border-radius: 50%;
    }
    .text {
      background-color: #fff;
      display: block;
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      text-align: center;
      margin-top: 0;
    }
  }

  .active {
    filter: none;
    opacity: 1;
    img {
      border-radius: 50%;
    }
    .text {
      background-color: #fff;
      display: block;
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      text-align: center;
      margin-top: 0;
    }
  }
}
</style>
